<template>
  <el-menu
    class="slide-menu"
    background-color="#001529"
    text-color="hsla(0, 0%, 100%, 0.7)"
    active-text-color="#ffffff"
    :unique-opened="true"
    :default-openeds="default_op"
    :default-active="active"
    @select="selected"
  >
    <template v-for="menu in menus">

      <el-submenu
        :index="menu.index"
        v-if="menu.children.length"
      >
        <template slot="title">
          <i
            v-if="menu.icon.length"
            :class="menu.icon"
          ></i>
          <span>{{menu.label}}</span>
        </template>
        <template v-for="child in menu.children">
          <el-menu-item :index="child.index">
            <span>{{child.label}}</span>
          </el-menu-item>
        </template>
      </el-submenu>
      <el-menu-item
        v-bind:index="menu.index"
        v-else
      >
        <template slot="title">
          <i
            v-if="menu.icon.length"
            :class="menu.icon"
          ></i>
          <span>{{menu.label}}</span>
        </template>
      </el-menu-item>
    </template>
    </el-menu>
</template>

<script>
export default {
  name: "uMenu",
  props: {
    menus: {
      type: Array,
      default: []
    }
  },
  data() {
    let default_op = this.$route.name
    return {
     default_op: [default_op]
    };
  },
  computed: {
    active(){
      return this.$route.name
    }
  },
  methods: {
    selected(router) {
      if (router != this.$route.name) {
        this.$router.push({ name: router });
      }
    }
  }
};
</script>
